<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebSocket Client</title>
</head>

<style>
.log {
	width: 500px;
	height: 300px;
	border: 1px solid #CCC;
	padding: 5px;
	margin: 5px 0px; 
	overflow-y : auto;
	display: block;
	word-break: break-all;
	word-wrap: break-word;
	overflow-y: auto;
	font-family:Simsun;
}
.msgServer{
	color: blue;
}
</style>

<script type="text/javascript">
	var socket = null;

	Date.prototype.format = function(format) {
		var date = {
			"M+" : this.getMonth() + 1,
			"d+" : this.getDate(),
			"h+" : this.getHours(),
			"m+" : this.getMinutes(),
			"s+" : this.getSeconds(),
			"q+" : Math.floor((this.getMonth() + 3) / 3),
			"S+" : this.getMilliseconds()
		};
		if (/(y+)/i.test(format)) {
			format = format.replace(RegExp.$1, (this.getFullYear() + '')
					.substr(4 - RegExp.$1.length));
		}
		for ( var k in date) {
			if (new RegExp("(" + k + ")").test(format)) {
				format = format.replace(RegExp.$1,
						RegExp.$1.length == 1 ? date[k] : ("00" + date[k])
								.substr(("" + date[k]).length));
			}
		}
		return format;
	}

	function getNowTime() {
		return new Date().format('hh:mm:ss S: ');
	}

	function dispalyMesage(msg) {
		var isServer = arguments[1] ? arguments[1] : false;
		var ta = document.getElementById('log');
		var cssName = "msgClient";
		if (isServer) {
			cssName = "msgServer"
		};
		
		ta.innerHTML = 
		"<div>" + getNowTime() + "<span class='"+cssName+"'> " + msg + "</span></div>" + ta.innerHTML;	
	}

	function controlBtn() {
		var isOpen = false;
		if ((socket != null && (socket.readyState == WebSocket.OPEN))) {
			isOpen = true;
		}

		document.getElementById("btnOpen").disabled = isOpen;
		document.getElementById("btnClose").disabled = !isOpen;
		document.getElementById("btnSend").disabled = !isOpen;
	}

	function send(message) {
		if ((socket != null) && (socket.readyState == WebSocket.OPEN)) {
			socket.send(message);
			//var buffer = new ArrayBuffer(128);
			//socket.send(buffer);

			//var intview = new Uint32Array(buffer);
			//socket.send(intview);

			//var blob = new Blob([buffer]);
			//socket.send(blob);
		} else {
			alert("contact not start");
		}
	}
	function Close() {
		if (socket != null) {
			socket.close();
		}
	}

	function clearMessage() {
		document.getElementById('log').innerHTML = "";
	}

	function Open() {
		controlBtn();
		if (socket != null && (socket.readyState == WebSocket.OPEN)) {
			Close();
		}
		if (window.WebSocket) {
			var host = document.getElementById('host').value;
			socket = new WebSocket(host);
			dispalyMesage("connect init...");
			socket.onmessage = function(event) {
				if (typeof (event.data) == "string") {
					dispalyMesage(event.data, true);
				} else {
					var reader = new FileReader();
					reader.onload = function(event) {
						if (event.target.readyState == FileReader.DONE) {
							var url = event.target.result;
						}
						dispalyMesage(url);
						//document.getElementById('responseText').src=url
					}
				}
			};
			socket.onopen = function(event) {
				controlBtn();
				dispalyMesage("connect open");
			};
			socket.onclose = function(event) {
				controlBtn();
				dispalyMesage("connect close");
			};
		} else {
			alert("browse not support WebSocket！");
		}
	}
</script>

<body>
	<div>
	<form onsubmit="return false;">
		<h3>My WebSocket Client</h3>
		<div>
			<input type="text" id="host" name="host" style="width: 300px"
				value="ws://127.0.0.1:8989/ws" th:value="${socketurl}" /> 
		    <input type="button"
				id="btnOpen" value="open" onclick="Open();" />
			<input
				type="button" id="btnClose" value="close" onclick="Close();">
		</div>

		<div id="log" class="log"></div>

		<input type="text" name="message" style="width: 300px"
			value="I am client" /> <input type="button" id="btnSend"
			value="send" onclick="send(this.form.message.value)" /> <input
			type="button" onclick="clearMessage();" value="clear" />
	</form>
	</div>


	<script type="text/javascript">
		Open();
	</script>

</body>
</html>
